<template>
	<div class="app-container">
		<el-form class="p20" @submit.native.prevent :model="form" ref="queryRef" :inline="true"
			label-width="106">
			<div class="bgWhite radius8 pt25">
				<div class="pl30 fb fs16 border-bottom pb25 mb30">
					新建订单
				</div>
				<el-form-item label="订单来源" prop="orderSource">
					<div class="item-width">
						<dict-tag :options="bus_source" :value="form.orderSource" />
					</div>
				</el-form-item>
				<el-form-item label="客户姓名" prop="customerName">
					<div class="item-width">
						{{form.customerName}}
					</div>
				</el-form-item>
				<el-form-item label="业务经理" prop="businessManagerId">
					<div class="item-width">
						{{form.businessManager}}
					</div>
				</el-form-item>
				<el-form-item label="付款类型" prop="paymentType">
					<div class="item-width">
						<dict-tag :options="bus_pay_type" :value="form.paymentType" />
					</div>
				</el-form-item>
				<el-form-item label="付款方式" prop="paymentMethod">
					<div class="item-width">
						<dict-tag :options="bus_pay_status" :value="form.paymentMethod" />
					</div>
				</el-form-item>
				<el-row>
					<el-col :span="24">
						<el-form-item label="付款备注" prop="remark" style="width: 570px;">
							<el-input v-model="form.remark" disabled style="box-shadow: none;" show-word-limit :rows="5"
								type="textarea" placeholder="请输入备注信息" resize="none"
								:input-style="{background:'#F7F8FA',borderRaduis:'15px',boxShadow:'none'}" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="付款截图" prop="paymentUrl" style="width: 570px;">
							<img v-if="form.paymentUrl" :src="form.paymentUrl"
								style="width: 110px;height: 110px;" />
						</el-form-item>
					</el-col>
				</el-row>
				<div class="flex col-center row-between plr30 border-bottom pb10">
					<div>
						<span class="color-red">*</span>
						<span class="fb mr20">关联商品</span>
						<div class="fs12 color-red mt6">预估收益：300 (订单提成)+100 (溢价分成)</div>
					</div>
					<!-- <el-form class="flex col-top row-between" :model="form" ref="queryRef" :inline="true">
						<el-form-item label="排序" prop="time" style="margin-bottom: 0;">
							<el-select v-model="form.priceType" placeholder="请选择" size="large" style="width: 240px">
								<el-option v-for="item in bus_goods_price_type " :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
					</el-form> -->
				</div>
				<div class="plr30 mt20">
					<el-table :data="form.goods" style="width: 100%;text-align: center;"
						:cell-style="{ textAlign: 'center','line-height':'54px'}"
						:header-cell-style="{ 'text-align': 'center','line-height':'54px','height':'54px!important'  }"
						:summary-method="getSummaries" show-summary>
						<el-table-column prop="commodityName" label="商品名称" />
						<el-table-column prop="commodityCode" label="商品编码" />
						<el-table-column prop="specificationId" label="商品规格">
							<template v-slot="scope">
								<dict-tag :options="bus_product_specification_unit"
									:value="scope.row.specificationId" />
							</template>
						</el-table-column>
						<el-table-column prop="factoryPrice" label="出厂价" />
						<el-table-column label="销售单价（元）" width="200px">
							<template #default="scope">
								{{scope.row.unitPrice}}
							</template>
						</el-table-column>
						<el-table-column prop="quantity" label="数量" width="200px">
							<template #default="scope">
								{{scope.row.quantity}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="总价（元）">
							<template #default="scope">
								{{scope.row.unitPrice*1*scope.row.quantity*1}}
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="flex col-center row-between plr30 border-bottom pb10 mt30">
					<div>
						<span class="color-red">*</span>
						<span class="fb mr20">赠品管理</span>
					</div>
				</div>
				<div class="plr30 mt20 pb30">
					<el-table :data="form.gift" style="width: 100%"
						:cell-style="{ textAlign: 'center','line-height':'54px'}"
						:header-cell-style="{ 'text-align': 'center','line-height':'54px','height':'54px!important'  }">
						<el-table-column prop="commodityName" label="商品名称" />
						<el-table-column prop="commodityCode" label="商品编码" />
						<el-table-column prop="specificationId" label="商品规格">
							<template v-slot="scope">
								<dict-tag :options="bus_product_specification_unit"
									:value="scope.row.specificationId" />
							</template>
						</el-table-column>
						<el-table-column prop="factoryPrice" label="出厂价" />
						<el-table-column label="销售单价（元）" width="200px">
							<template #default="scope">
								{{scope.row.unitPrice}}
							</template>
						</el-table-column>
						<el-table-column prop="quantity" label="数量" width="200px">
							<template #default="scope">
								{{scope.row.quantity}}
							</template>
						</el-table-column>
						<el-table-column prop="date" label="总价（元）">
							<template #default="scope">
								{{scope.row.unitPrice*1*scope.row.quantity*1}}
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="bgWhite radius8 pt20">
				<div class="fb fs16 pb15 pl20">
					收货信息
				</div>
				<el-form-item label="收货人信息" prop="recipient">
					<div class="">
						{{form.recipient}}
					</div>
				</el-form-item>
				<el-form-item label="收货人手机号" prop="recipientPhone">
					<div class="">
						{{form.recipientPhone}}
					</div>
				</el-form-item>
				<el-form-item label="收货地址" prop="shippingAddress">
					<div class="">
						{{form.shippingAddress}}
					</div>
				</el-form-item>
				<el-form-item label="物流" prop="logisticsId">
					<div class="item-width">
						<dict-tag :options="bus_logistics_type" :value="form.logisticsId" />
					</div>
				</el-form-item>
			</div>
			<div class="bgWhite radius8 pt20">
				<div class="fb fs16 pb15 pl20">
					其他信息
				</div>
				<el-form-item label="文档单据" prop="documentType" label-width="100px">
					<el-radio-group v-model="form.documentType" style="width: 340px">
						<el-radio disabled v-for="dict in bus_document_type" :key="dict.value" :label="dict.value"
							:value="dict.value" size="large">
							{{dict.label}}
						</el-radio>
					</el-radio-group>
				</el-form-item>
			</div>
		</el-form>
	</div>
</template>
<script>
	import {
		getUserListData //查业务经理
	} from "@/api/business/teamOpportunity";
	import {
		getGoodsGroup, //查询商品组
	} from "@/api/business/product";
	// import {
	// 	orderAdd, //提交订单
	// 	orderDetail, //获取订单详情
	// 	orderEdit, //编辑订单
	// 	orderDemo //保存草稿
	// } from "@/api/business/order";
	export default {
		data() {
			return {
				imageUrl: '',
				value: '',
				bus_source: this.useDict('bus_source').bus_source, //来源
				bus_pay_type: this.useDict('bus_pay_type').bus_pay_type, //类型
				bus_pay_status: this.useDict('bus_pay_status').bus_pay_status, //方式
				bus_product_specification_unit: this.useDict('bus_product_specification_unit')
					.bus_product_specification_unit, //瓶 套
				bus_goods_price_type: this.useDict('bus_goods_price_type').bus_goods_price_type, //
				bus_logistics_type: this.useDict('bus_logistics_type').bus_logistics_type, //物流方式
				bus_document_type: this.useDict('bus_document_type').bus_document_type, //文档单据
				teamOptions: [], //业务经理
				goodsId: [], //关联商品的id,
				form: {
					id: '',
					orderSource: '', //订单来源
					customerId: '', //客户id
					customerName: '', //客户姓名
					businessManagerId: '', //业务经理id
					businessManager: '', //业务经理
					paymentType: '', //付款类型
					paymentMethod: '', //付款方式
					remark: '', //备注
					paymentUrl: '', //付款截图url
					recipient: '', //收货人
					recipientPhone: '', //收货人手机号
					shippingAddress: '', //收货地址
					logisticsId: '', //物流id
					logistics: '', //物流名称
					documentType: '', //文档单据类型
					orderTotalAmount: '', //订单总金额
					priceType: '', //bus_goods_price_type 字典
					goods: [], //商品
					gift: [], //赠品
					commodityList: [{
						type: '', //类型（0=商品，1=赠品）
						commodityId: '', //商品id
						commoditySpecification: '', //商品规格
						factoryPrice: '', //出厂价
						unitPrice: '', //销售单价（元）
						quantity: '', //数量
						subtotal: '', //小计
						classifyId: '', //分类id
						commodityType: '', //产品类型正常品，试验品促销品
						commodityNumber: '', //商品编码
						productId: '', //关联产品id
						specificationId: '', //关联规格ID
						commodityName: '', //商品名称
						commodityCode: '', //商品Code码
						minUnit: '', //最小单位
						caseQuantity: '', //整件数量
						unitContent: '', //单位含量
						contentUnit: '', //含量单位（数据字典）
						mainImageUrl: '', //商品主图URL
						onlineUnitPrice: '', //线上拆箱单价
						caseUnitPrice: '', //整件单价
						tonPrice: '' //吨价
					}] //订单商品信息
				},
				list: [{}],
				loading: false,
				yjPrice: 0, //溢价
				hjPrice: 0, //合计
			}
		},
		created() {
			//获取业务经理
			this.getUserList()
			this.form = JSON.parse(this.$route.query.form)
			this.countPrice()
			
		},
		methods: {
			// 获取业务经理
			getUserList() {
				//获取自己和同部门的用户信息
				getUserListData().then(response => {
					this.teamOptions = response.data;
				});
			},
			//添加商品最后一行自定义
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 3) {
						sums[index] = '溢价金额：' + this.yjPrice;
						return;
					} else if (index == 6) {
						sums[index] = '合计：' + this.hjPrice;
					}
					// const values = data.map(item => Number(item[column.property]));
					// if (!values.every(value => isNaN(value))) {
					// 	sums[index] = values.reduce((prev, curr) => {
					// 		const value = Number(curr);
					// 		if (!isNaN(value)) {
					// 			return prev + curr;
					// 		} else {
					// 			return prev;
					// 		}
					// 	}, 0);
					// 	sums[index] += ' 元';
					// } else {
					// 	sums[index] = '';
					// }
				});
				return sums;
			},
			// 关联商品计算溢价/合计
			countPrice() {
				// 计算溢价
				let a = 0 //溢价
				let b = 0 //总价
				for (let key in this.form.goods) {
					this.form.goods[key].subtotal = this.form.goods[key].unitPrice * 1 * this.form.goods[key].quantity * 1
					a += (this.form.goods[key].unitPrice * 1 - this.form.goods[key].factoryPrice * 1)
					b += (this.form.goods[key].unitPrice * 1 * this.form.goods[key].quantity * 1)
				}
				console.log(a,'aaaa')
				if (a >= 0) {
					this.yjPrice = a
				}
				this.hjPrice = b
			}
		}
	}
</script>

<style>
	.item-width{
		width: 248px;
	}
	.el-form-item--default .el-form-item__label{
		color: #8c939d;
		font-weight: normal;
	}
	.avatar-uploader .el-upload {
		background: #F7F8FA;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
		width: 110px;
		height: 110px;
		text-align: center;
		line-height: 22px;
		color: #8c939d;
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}

	.is-leaf {
		text-align: center;
	}
</style>